<el-card class="mb-4" shadow="hover">
  <template #header>
    <div class="flex items-center justify-between">
      <span class="text-xl font-bold text-blue-600">活动报名</span>
    </div>
  </template>
  <el-form :model="form" label-width="120px" :rules="rules" ref="formRef">
    <el-form-item label="活动名称" prop="title">
      <el-input v-model="form.title" placeholder="请输入活动名称" />
    </el-form-item>
    <el-form-item label="活动类型" prop="activityType">
      <el-select v-model="form.activityType" placeholder="请选择活动类型" style="width: 100%">
        <el-option label="学术讲座" value="学术讲座" />
        <el-option label="文艺演出" value="文艺演出" />
        <el-option label="体育比赛" value="体育比赛" />
        <el-option label="志愿服务" value="志愿服务" />
        <el-option label="其他" value="其他" />
      </el-select>
    </el-form-item>
    <el-form-item label="活动地点" prop="location">
      <el-input v-model="form.location" placeholder="请输入活动地点" />
    </el-form-item>
    <el-form-item label="活动时间" prop="time">
      <el-date-picker
        v-model="form.time"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        style="width: 100%"
      />
    </el-form-item>
    <el-form-item label="活动描述" prop="descr">
      <el-input
        v-model="form.descr"
        type="textarea"
        :rows="4"
        placeholder="请输入活动描述"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">提交申请</el-button>
      <el-button @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
</el-card>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const formRef = ref(null)
const form = ref({
  title: '',
  activityType: '',
  location: '',
  time: [],
  descr: '',
  clubId: null
})

const rules = {
  title: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
  activityType: [{ required: true, message: '请选择活动类型', trigger: 'change' }],
  location: [{ required: true, message: '请输入活动地点', trigger: 'blur' }],
  time: [{ required: true, message: '请选择活动时间', trigger: 'change' }],
  descr: [{ required: true, message: '请输入活动描述', trigger: 'blur' }]
}

const submit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      const [startTime, endTime] = form.value.time
      const data = {
        ...form.value,
        startTime,
        endTime,
        clubId: user.clubId
      }
      delete data.time
      
      request.post('/activity/add', data).then(res => {
        if (res.code === '200') {
          ElMessage.success('申请提交成功')
          reset()
        } else {
          ElMessage.error(res.msg || '申请提交失败')
        }
      })
    }
  })
}

const reset = () => {
  formRef.value.resetFields()
  form.value = {
    title: '',
    activityType: '',
    location: '',
    time: [],
    descr: '',
    clubId: null
  }
}
</script> 